import axios from 'axios'
import React, { Component } from 'react'

export default class TodoFooter extends Component {
  handleClick = (value) => {
    this.props.modify(value)
  }
  render() {
    const { list, active } = this.props
    const leftList = list.filter((item) => item.done === false)
    const isShow = list.some((item) => item.done)
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{leftList.length}</strong> item left
        </span>
        <ul className="filters">
          <li onClick={this.handleClick.bind(this, 'all')}>
            <a className={active === 'all' ? 'selected' : ''} href="#/">
              All
            </a>
          </li>
          <li onClick={this.handleClick.bind(this, 'active')}>
            <a
              href="#/active"
              className={active === 'active' ? 'selected' : ''}
            >
              Active
            </a>
          </li>
          <li onClick={this.handleClick.bind(this, 'completed')}>
            <a
              href="#/completed"
              className={active === 'completed' ? 'selected' : ''}
            >
              Completed
            </a>
          </li>
        </ul>
        {isShow && (
          <button className="clear-completed" onClick={this.clear}>
            Clear completed
          </button>
        )}
      </footer>
    )
  }
  // 清除完成的任务
  clear = async () => {
    const arr = this.props.list.filter((item) => item.done === true)
    if (arr.length === 0) return
    /*   arr.forEach((item) => {
      axios.delete(`http://localhost:8888/todos/${item.id}`)
    })
    this.props.getTodoList() */
    /*   Promise.all(arr).then(async (arr) => {
      arr.forEach(
        async (item) =>
          await axios.delete(`http://localhost:8888/todos/${item.id}`)
      )
      await this.props.getTodoList()
    }) */
    await Promise.all(
      arr.map((item) => axios.delete(`http://localhost:8888/todos/${item.id}`))
    )
    this.props.getTodoList()
  }
}
